<template>
  <div class="container">
    <div style="margin-top: 80px;">
      <img class="img"
        src="https://img1.baidu.com/it/u=380622857,2709733589&fm=253&fmt=auto&app=138&f=JPEG?w=659&h=659" />
    </div>
    <nut-form ref="formRef" :model-value="formData" :rules="{
      name: [
        { required: true, message: '请填写账号' },
        {
          message: '账号至少两个字符',
          validator: nameLengthValidator
        }
      ]
    }">
      <nut-form-item label="账号" prop="name">
        <nut-input v-model="formData.name" placeholder="请输入账号" :disabled="false" type="text"
          @blur="customBlurValidate('name')" />
      </nut-form-item>
      <nut-form-item label="密码" prop="password" required :rules="[{ required: true, message: '请填写密码' }]">
        <nut-input v-model="formData.password" placeholder="请输入密码" type="password" />
      </nut-form-item>
      <div style="margin-top: 20px;">
        <nut-button block type="warning" @click="submit" class="loginButton">登录</nut-button>
      </div>
      <div style="margin-top: 20px;">
        <nut-button plain type="primary" size="small" @click="reset"
          style="margin-left: 15px; margin-bottom: 20px;">重置提示</nut-button>
          
          <nut-button plain type="primary" size="small" @click="register"
          style="margin-left: 140px; margin-bottom: 20px;">注册</nut-button>
      </div>
    </nut-form>
  </div>

</template>

<script setup>
  import { ref } from 'vue'
  import Taro from '@tarojs/taro'
  import { login } from '../../api/index'
  const formData = ref({
    name: '',
    password: ''
  })

  const formRef = ref(null)

  const reset = () => {
    formRef.value?.reset()
  }

  const submit = () => {
    formRef.value?.validate().then(({ valid, errors }) => {
      if (valid) {
        console.log('success:', formData.value)
        login(formData.value).then(res => {
          const userInfo = res.data.data;
          if (!res.data.success) {
            Taro.showToast({ title: res.data.msg || '用户名或密码错误', icon: 'none' })
            return
          }
          Taro.showToast({ title: '登录成功', icon: 'success' })
          Taro.setStorageSync("loginData", userInfo);
          // 登录成功，跳转首页
          Taro.switchTab({ url: '/pages/index/index' })
        })
      } else {
        console.warn('error:', errors)
      }
    })
  }
  
  // 手机号注册
  const register = () => {
    // 跳转注册页面
    Taro.navigateTo({ url: '/pages/wx/wx' })
  }
    
  // 失去焦点校验
  const customBlurValidate = (prop) => {
    formRef.value?.validate(prop).then(({ valid, errors }) => {
      if (valid) {
        console.log('success:', formData.value)
      } else {
        console.warn('error:', errors)
      }
    })
  }
  const nameLengthValidator = (val) => {
    if (val.length > 2) {
      return Promise.resolve()
    } else {
      return Promise.reject('名称两个字以上')
    }
  }
  
</script>

<style>
  page {
    background: linear-gradient(to bottom, #fcd4ca, #feb47b, #a7e0ec, #f6c1cb);
  }
  .img {
    width: 100%;
    height: 550px;
  }
  .container {
    margin-top: 100px;
    width: 80%;
    margin: auto;
  }
  .loginButton {
    width: 90%;
    margin: auto;
    background: linear-gradient(to right, #f4b8a9, #f56b84, #74dcf0, #b8ed5d);
  }
</style>